<style scoped lang="scss">

 .title {
      width: 100%;
      font-size: 12px;
      text-align: center;
      background-color: #fff;
      padding-bottom: 30px;
      h2 {
        display: inline-block;
        width: 35%;
        font-size: 20px;
        font-weight: 500;
        letter-spacing: 1px;
        color: #202020;
        line-height: 80px;
        i {
          letter-spacing: 0px;
          color: #ff1b1b;
        }
      }
      .steps {
        width: 65%;
        display: inline-block;
        font-size: 13px;
        .one {
          color: rgb(37, 36, 36);
          .yuan {
            display: inline-block;
            box-sizing: border-box;
            width: 25px;
            height: 25px;
            margin: 0 15px 0 0px;
            line-height: 25px;
            border-radius: 50%;
            color: rgb(187, 186, 186);
            border: 1px solid rgb(187, 186, 186);
            text-align: center;
          }
          .xian {
            display: inline-block;
            width: 90px;
            height: 2px;
            margin: 2px 20px;
            background-color: rgb(187, 186, 186);
          }
          .active {
            color: #fff;
            background-color: #448ef7;
            border: 0;
          }
        }
      }
      .author {
        width: 100%;
        font-size: 13px;
        height: 13px;
        // line-height: 80px;
        .au {
          display: inline-block;
          margin-right: 10%;
        }
        .or {
          display: inline-block;
          margin-left: 5px;
          color: #367fe6;
          border-bottom: 1px solid #367fe6;
        }
        .last {
          margin-right: 0px;
        }
      }
    }
</style>
<template>
  <div class="title">
    <h2><i>{{ date }}</i> 年度管理者“一人一表”</h2>
    <div v-if="steps" class="steps">
      <span
        class="one"
      ><i class="yuan active">1</i>编制中/待提交<i
        class="xian"
        :class="stepNumber >= 2 ? 'active' : ''"
      /></span>
      <span
        class="one"
      ><i class="yuan" :class="stepNumber >= 2 ? 'active' : ''">2</i>已提交/待审核<i
        class="xian"
        :class="stepNumber === 3 ? 'active' : ''"
      /></span>
      <span class="one"><i class="yuan" :class="stepNumber === 3 ? 'active' : ''">3</i>上级已审核</span>
    </div>
    <div class="author">
      <span class="au">持表人:<i class="or">{{ tabContent.empName }}</i></span>
      <span
        class="au"
      >公司部门:<i class="or">{{ tabContent.orgName }}</i></span>
      <span
        class="au"
      >职务:<i class="or">{{ tabContent.jobName }}</i></span>
      <span class="au last">上级领导/审核人:<i class="or">{{ tabContent.approveEmpName }}</i></span>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    steps: {
      type: Boolean,
      default: true
    },
    date: {
      type: String,
      default: ''
    },
    tabContent: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      stepNumber: ''
    }
  },
  watch: {
    date(val) {
      this.init()
    },
    tabContent(val) {
      // console.log(val)
    }
  },
  mounted() {

  },
  methods: {
    init() {
      if (this.$route.path === '/viewApproval') {
        this.stepNumber = 3
      } else {
        this.$http.post('/serviceAction/common', {
          'serviceName': 'MT01101',
          'methodName': 'getProgress',
          'reportYear': this.date
        }).then((res) => {
          if (res.isSuccess) {
            if (res.data === 0) {
              this.stepNumber = 1
            } else {
              this.stepNumber = res.data
            }
          }
        })
      }
    }
  }
}

</script>
